#tb{
    border: solid 1px black;
    border-collapse: collapse;
}





.cell{
    width: 20px;
    height: 20px;
    /* border: solid 1px black; */
    background-size: 100% 100%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
.cell[state="normal"]{
    background-image: url(blank.png);
}

/* .cell[bomb]{
    background-image: url(boom_ex.png);
} */
.cell[state="flag"]{
    background-image: url(flag.png);
}
.cell[state="bombex"]{
    background-image: url(boom_ex.png);
}
.cell[state="bombpl"]{
    background-image: url(boom_plain.png);
}
.cell[state="b0"]{
    background-image:none;
}
.cell[state="b1"]:before{
    content:"1";
    color: blue;
}
.cell[state="b2"]:before{
    content:"2";
    color:green;
}
.cell[state="b3"]:before{
    content:"3";
    color:red;
}
.cell[state="b4"]:before{
    content:"4";
    color: palegoldenrod;
}
.cell[state="b5"]:before{
    content:"5";
    color: pink;
}
.cell[state="b6"]:before{
    content:"6";
    color: white;
}
.cell[state="b7"]:before{
    content:"1";
    color:beige;
}
.cell[state="b8"]:before{
    content:"8";
    color:yellowgreen;
}